


<!-- 外盒
    margin:     外边距      外层
    border:     边框        中间
    padding:    内边距      内层
-->

<!-- box-sizing     更改外盒计算方式
    content-box     （设置宽高=100=内容）
    border-box;     （设置宽高=100=边框+内边距+内容）
 -->


<!-- 外边距margin
    简写
    margin: 大小;
    margin: 上 右 下 左;
    单独设置
    margin-top: 大小;
    margin-bottom: 大小;
    margin-left: 大小;
    margin-right: 大小;
-->


<!-- 边框border
    简写
    border: 大小 线条样式 颜色;
    单独设置
    border-top: 大小 线条样式 颜色;
    border-bottom: 大小 线条样式 颜色;
    border-left: 大小 线条样式 颜色;
    border-bottom: 大小 线条样式 颜色;
-->



<!-- 内边距padding
    简写
    padding: 大小;
    单独设置
    padding-top: 大小;
    padding-bottom: 大小;
    padding-left: 大小;
    padding-right: 大小;
-->





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外盒</title>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
            margin: 15px;
            border: 10px solid black;
            padding: 5px;
        }

        .div2{
            width: 100px;
            height: 100px;
            background-color: lightpink;
            margin: 15px;
            border: 10px solid black;
            padding: 5px;
        }
        .div3{
            width: 1000px;
            height: 100px;
            background-color: purple;
            margin: 0 auto;

        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>
</html>











